@@include('header.htm', {
  "title": "Chart Widgets - Sleek Admin Dashboard Template",

	"vector_map": "",

	"date_range_picker": "<link href='assets/plugins/daterangepicker/daterangepicker.css' rel='stylesheet'>",

	"select2": "",

	"ladda": "",

	"toastr": "",

	"flag_icon": "",

	"full_calendar_core": "",
	"full_calendar_daygrid": "",

	"data_table": "",

	"responsive_data_table": "",

	"expendable_data_table": ""
})

@@include('sidebar.htm', {
	"parent": "widgets",
	"sub_parent": "widgets",
	"active": "chart-widget"
})

@@include('top-bar.htm')




<!-- First Row  -->
<div class="row">
	<div class="col-md-6 col-lg-4 col-xl-3">
		<div class="widget-block rounded bg-white  d-flex">
			<div class="widget-info align-self-center w-50">
				<h3 class="text-dark mb-2">71,503</h3>
				<p>Online Signups</p>
			</div>

			<div class="widget-chart w-50">
				<canvas id="barChart1"></canvas>
			</div>
		</div>
	</div>

	<div class="col-md-6 col-lg-4 col-xl-3">
		<div class="widget-block rounded bg-white  d-flex">
			<div class="widget-info align-self-center w-50">
				<h3 class="text-dark mb-2">9,503</h3>
				<p>Weekly Visitors</p>
			</div>

			<div class="widget-chart w-50">
				<canvas id="linechart1"></canvas>
			</div>
		</div>
	</div>

	<div class="col-md-6 col-lg-4 col-xl-3">
		<div class="widget-block rounded bg-white  d-flex">
			<div class="widget-info align-self-center w-50">
				<h3 class="text-dark mb-2">71,503</h3>
				<p>Weekly Total Order</p>
			</div>

			<div class="widget-chart w-50">
				<canvas id="areaChart1"></canvas>
			</div>
		</div>
	</div>

	<div class="col-md-6 col-lg-4 col-xl-3">
		<div class="widget-block rounded bg-white  d-flex">
			<div class="widget-info align-self-center w-50">
				<h3 class="text-dark mb-2">10,503</h3>
				<p>Revenue This Week</p>
			</div>

			<div class="widget-chart w-50">
				<canvas id="gline1"></canvas>
			</div>
		</div>
	</div>
</div>

<!-- Second Row  -->
<div class="row">
	<div class="col-md-6 col-lg-4 col-xl-3">
		<div class="widget-block rounded bg-primary  d-flex">
			<div class="widget-info align-self-center w-50">
				<h3 class="text-white mb-2">71,503</h3>
				<p>Online Signups</p>
			</div>

			<div class="widget-chart w-50">
				<canvas id="barChart2"></canvas>
			</div>
		</div>
	</div>

	<div class="col-md-6 col-lg-4 col-xl-3">
		<div class="widget-block rounded bg-warning  d-flex">
			<div class="widget-info align-self-center w-50">
				<h3 class="text-white mb-2">9,503</h3>
				<p>Weekly Visitors</p>
			</div>

			<div class="widget-chart w-50">
				<canvas id="linechart2"></canvas>
			</div>
		</div>
	</div>

	<div class="col-md-6 col-lg-4 col-xl-3">
		<div class="widget-block rounded bg-danger  d-flex">
			<div class="widget-info align-self-center w-50">
				<h3 class="text-white mb-2">71,503</h3>
				<p>Weekly Total Order</p>
			</div>

			<div class="widget-chart w-50">
				<canvas id="areaChart2"></canvas>
			</div>
		</div>
	</div>

	<div class="col-md-6 col-lg-4 col-xl-3">
		<div class="widget-block rounded bg-success  d-flex">
			<div class="widget-info align-self-center w-50">
				<h3 class="text-white mb-2">10,503</h3>
				<p>Revenue This Week</p>
			</div>

			<div class="widget-chart w-50">
				<canvas id="gline2"></canvas>
			</div>
		</div>
	</div>
</div>

<!-- Third Row  -->
<div class="row">
	<div class="col-xl-3 col-sm-6">
		<div class="card widget-block p-4 rounded bg-white ">
			<div class="card-block">
				<h3 class="text-dark">71,503</h3>
				<p class="py-2">Online Signups</p>
			</div>

			<div class="chartjs-wrapper" style="height: 110px;">
				<canvas id="barChart"></canvas>
			</div>
		</div>
	</div>

	<div class="col-xl-3 col-sm-6">
		<div class="card widget-block p-4 rounded bg-white ">
			<div class="card-block">
				<h3 class="text-dark">9,503</h3>
				<p class="py-2">New Visitors Today</p>
			</div>

			<div class="chartjs-wrapper" style="height: 110px;">
				<canvas id="dual-line"></canvas>
			</div>
		</div>
	</div>

	<div class="col-xl-3 col-sm-6">
		<div class="card widget-block p-4 rounded bg-white ">
			<div class="card-block">
				<h3 class="text-dark">71,503</h3>
				<p class="py-2">Monthly Total Order</p>
			</div>

			<div class="chartjs-wrapper" style="height: 110px;">
				<canvas id="area-chart"></canvas>
			</div>
		</div>
	</div>
	
	<div class="col-xl-3 col-sm-6">
		<div class="card widget-block p-4 rounded bg-white ">
			<div class="card-block">
				<h3 class="text-dark">9,503</h3>
				<p class="py-2">Total Revenue This Year</p>
			</div>

			<div class="chartjs-wrapper" style="height: 110px;">
				<canvas id="line"></canvas>
			</div>
		</div>
	</div>
</div>

<!-- Fourth Row  -->
<div class="row">
	<div class="col-xl-3 col-sm-6">
		<div class="card widget-block p-4 rounded bg-primary ">
			<div class="card-block">
				<h3 class="text-white">71,503</h3>
				<p class="py-2">Online Signups</p>
			</div>

			<div class="chartjs-wrapper" style="height: 110px;">
				<canvas id="barChart3"></canvas>
			</div>
		</div>
	</div>

	<div class="col-xl-3 col-sm-6">
		<div class="card widget-block p-4 rounded bg-warning ">
			<div class="card-block">
				<h3 class="text-white">9,503</h3>
				<p class="py-2">New Visitors Today</p>
			</div>

			<div class="chartjs-wrapper" style="height: 110px;">
				<canvas id="dual-line3"></canvas>
			</div>
		</div>
	</div>

	<div class="col-xl-3 col-sm-6">
		<div class="card widget-block p-4 rounded bg-danger ">
			<div class="card-block">
				<h3 class="text-white">71,503</h3>
				<p class="py-2">Monthly Total Order</p>
			</div>

			<div class="chartjs-wrapper" style="height: 110px;">
				<canvas id="area-chart3"></canvas>
			</div>
		</div>
	</div>

	<div class="col-xl-3 col-sm-6">
		<div class="card widget-block p-4 rounded bg-success ">
			<div class="card-block">
				<h3 class="text-white">9,503</h3>
				<p class="py-2">Total Revenue This Year</p>
			</div>

			<div class="chartjs-wrapper" style="height: 110px;">
				<canvas id="line3"></canvas>
			</div>
		</div>
	</div>
</div>

<!-- Fifth Row  -->
<div class="row">
	<div class="col-xl-8 col-md-12">
		@@include('sales-graph.htm')
	</div>

	<div class="col-xl-4 col-md-12">
		@@include('revenue-donut-chart.htm')
	</div>
</div>

<!-- Sixth Row  -->
<div class="row">
	<div class="col-xl-4 col-md-12">
		<div class="card card-default">
			<div class="card-header justify-content-center" polar-data-content>
				<h2>Sale Overview</h2>
			</div>

			<div class="card-body pt-0" style="position: relative;">
				<canvas id="polar" polar-data-height></canvas>
			</div>
		</div>
	</div>

	<div class="col-xl-8 col-md-12">
		<div class="card card-default" id="user-acquisition">
			<div class="card-header justify-content-between pb-5">
				<h2 class=" text-dark">User Acquisition</h2>
			</div>

			<div class="card-body pt-0 mb-5" style="position: relative; height:45vh">
				<canvas id="acquisition" class="chartjs"></canvas>
				<div id="acqLegend" class="customLegend"></div>
			</div>
		</div>
	</div>
</div>

<!-- Seventh Row  -->
<div class="row">
	<div class="col-xl-8">
		<div class="card card-default" id="activity-user">
			<div class="card-header d-flex flex-wrap justify-content-between">
				<h2>User Activity</h2>

				<div class="date-range-report ">
					<span></span>
				</div>
			</div>

			<div class="card-body">
				<canvas id="activity" class="chartjs"></canvas>
			</div>
		</div>
	</div>

	<div class="col-xl-4">
		<div class="card card-default" id="activity-user">
			<div class="card-header">
				<h2>Current Users</h2>
			</div>

			<div class="card-body">
				<canvas id="currentUser" class="chartjs"></canvas>
			</div>
		</div>
	</div>
</div>

<!-- Recent Orders -->
<div class="row">
	<div class="col-lg-6">
		<!-- Sessions By device Chart -->
		<div class="card card-default" id="analytics-device">
			<div class="card-header justify-content-between">
				<h2>Sessions by Device</h2>
			</div>

			<div class="card-body">
				<div class="pb-5">
					<canvas id="deviceChart"></canvas>
				</div>

				<div class="row no-gutters justify-content-center">
					<div class="col-4 col-lg-3">
						<div class="card card-icon-info text-center border-0">
							<i class="mdi mdi-desktop-mac"></i>
							<p class="pt-3 pb-1">Desktop</p>
							<h4 class="text-dark pb-1">60.0%</h4>
							<span class="text-danger">1.5% <i class="mdi mdi-arrow-down-bold"></i></span>
						</div>
					</div>

					<div class="col-4 col-lg-3">
						<div class="card card-icon-info text-center border-0">
							<i class="mdi mdi-tablet-ipad"></i>
							<p class="pt-3 pb-1">Tablet</p>
							<h4 class="text-dark pb-1">15.0%</h4>
							<span class="text-success">1.5% <i class="mdi mdi-arrow-up-bold"></i></span>
						</div>
					</div>

					<div class="col-4 col-lg-3">
						<div class="card card-icon-info text-center border-0">
							<i class="mdi mdi-cellphone-android fa-3x"></i>
							<p class="pt-3 pb-1">Mobile</p>
							<h4 class="text-dark pb-1">25.0%</h4>
							<span class="text-success">1.5% <i class="mdi mdi-arrow-up-bold"></i></span>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

	<div class="col-lg-6">
		<div class="card card-default" id="activity-user">
			<div class="card-header">
				<h2>Sale Overview</h2>
			</div>

			<div class="card-body">
				<canvas id="radar" radar-data-height></canvas>
			</div>
		</div>
	</div>
</div>




@@include('footer.htm', {

	"chart_js": "<script src='assets/plugins/charts/Chart.min.js'></script>",
	"chartjs": "<script src='assets/js/chart.js'></script>",

	"google_map": "",
	"mapjs": "",

	"vector_map": "",
	"vector_map_world_mill": "",
	"vector_map_js": "",
	
	"date_range_picker_moment": "<script src='assets/plugins/daterangepicker/moment.min.js'></script>",
	"date_range_picker": "<script src='assets/plugins/daterangepicker/daterangepicker.js'></script>",
	"date_range_js": "<script src='assets/js/date-range.js'></script>",

	"select2": "",

	"ladda_spin": "",
	"ladda": "",

	"jquery_mask": "",

	"toastr": "",

	"circle_progress": "",

	"full_calendar_core": "",
	"full_calendar_daygrid": "",
	"full_calendar_js": "",

	"data_table": "",
	"data_table_bootstrap4": "",

	"responsive_data_table": ""
})
